<template>
  <div class="today-plan">
    <table>
      <thead>
        <tr>
          <th class="LeftCell TopCell" style="width: auto"></th>
          <th class="TopCell">时间</th>
          <th class="TopCell RightCell">内容</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in planList.task" :key="index + 1">
          <td
            :class="{
              LeftCell: true,
              BottomCell: index + 1 === planList.length,
            }"
            @click="ChangeStatus(index, item.isDo === 1 ? 0 : 1)"
          >
            <div class="CheckBox">{{ item.isDo === 1 ? '√' : '' }}</div>
          </td>
          <td
            style="text-align: center"
            :class="{
              BottomCell: index + 1 === planList.length,
              TextCell: true,
            }"
          >
            {{ item.startTime + '~' + item.endTime }}
          </td>
          <td
            :class="{
              TextCell: true,
              RightCell: true,
              BottomCell: index + 1 === planList.length,
            }"
          >
            {{ item.task.length > 23 ? item.task.slice(0, 23) + '...' : item.task }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { doTaskService, getMyPlanService } from '@/api/Plan'
import { showSuccessToast, showFailToast } from 'vant'
import { onMounted, ref } from 'vue'
const active = ref(0)
//数据
const planList = ref({})
//勾选更改状态
const ChangeStatus = (index, status) => {
  planList.value.task[index].isDo = status
  doTaskService(planList.value)
}

const getMyPlan = async () => {
  const { data } = await getMyPlanService()
  planList.value = data
}
onMounted(() => {
  getMyPlan()
})
</script>
<style lang="scss" scoped>
.today-plan {
  position: relative;
  padding: 0px 0px;
  scrollbar-width: none;
  overflow: auto;
  font-family: '爱点风雅黑';
  table {
    width: 90%;
    border-collapse: collapse;
    margin: 10px auto;
    thead {
      background-color: #edf8ff;
      th {
        padding: 10px;
        border: #000 1px solid;
      }
    }
    tbody {
      font-family: '猫糖圆体';
    }
    td {
      border: #000 1px solid;
      padding: 10px;
    }
  }
}
.CheckBox {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
  margin: 0 auto;
  font-family: '爱点风雅黑';
  font-weight: 7.6vw;
  text-align: center;
  line-height: 12px;
  color: green;
  font-size: 25px;
}
.LeftCell {
  border-left: none !important;
}
.RightCell {
  border-right: none !important;
}
.TopCell {
  border-top: none !important;
}
.BottomCell {
  border-bottom: none !important;
}
.TextCell {
  font-size: 12px;
}
.Morning {
  background-color: #f1ffff;
}
.Noon {
  background-color: #fef8f1;
}
.AfterNoon {
  background-color: #fbf5ff;
}
</style>